<clr-datagrid (clrDgRefresh)="refresh($event)" class="wayne-clr-datagrid">
  <clr-dg-column class="col-id">
    <ng-container>ID</ng-container>
  </clr-dg-column>
  <clr-dg-column [clrDgField]="'name'">
    <ng-container *clrDgHideableColumn="showState['名称']">名称</ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['角色']">角色</ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-time">
    <ng-container *clrDgHideableColumn="showState['创建时间']">创建时间</ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['过期时间']">过期时间(s)</ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-user">
    <ng-container *clrDgHideableColumn="showState['创建者']">创建者</ng-container>
  </clr-dg-column>
  <clr-dg-column>
    <ng-container *clrDgHideableColumn="showState['描述']">描述</ng-container>
  </clr-dg-column>
  <clr-dg-column class="col-operate">
    <ng-container *clrDgHideableColumn="showState['操作']">操作</ng-container>
  </clr-dg-column>

  <clr-dg-row *ngFor="let apiKey of apiKeys" [clrDgItem]="apiKey">
    <clr-dg-cell class="col-id">{{apiKey.id}}</clr-dg-cell>
    <clr-dg-cell class="copy">{{apiKey.name}}</clr-dg-cell>
    <clr-dg-cell>{{apiKey.group?.name}}</clr-dg-cell>
    <clr-dg-cell class="col-time">{{apiKey.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</clr-dg-cell>
    <clr-dg-cell>{{apiKey.expireIn==0 ? "永久有效": apiKey.expireIn}}</clr-dg-cell>
    <clr-dg-cell class="col-user">{{apiKey.user}}</clr-dg-cell>
    <clr-dg-cell>{{apiKey.description}}</clr-dg-cell>
    <clr-dg-cell class="col-operate">
      <button class="wayne-button text" *ngIf="authService.currentAppPermission.apiKey.read || authService.currentUser.admin" href="javascript:void(0)" (click)="tokenDetail(apiKey)">详情</button>
      <button class="wayne-button text" *ngIf="authService.currentAppPermission.apiKey.delete || authService.currentUser.admin" href="javascript:void(0)" (click)="deleteApiKey(apiKey)">删除</button>
    </clr-dg-cell>
  </clr-dg-row>

  <wayne-paginate
    [(currentPage)]="currentPage"
    [total]="page.totalCount"
    [pageSizes]="[10, 20, 50]"
    (sizeChange)="pageSizeChange($event)"
  >
  </wayne-paginate>
</clr-datagrid>
<token-detail></token-detail>
